<template>
    <div class="query-list">
        <!-- 整体内容区域 -->
        <div class="content-wrapper">
            <!-- 搜索表单区域 -->
            <div class="search-form">
                <el-form ref="formRef" :inline="true" class="search-form-content" @keyup.enter="handleSearch">
                    <!-- 动态插槽：搜索条件 -->
                    <slot name="query"></slot>

                    <!-- 搜索和重置按钮 -->
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch" :loading="loading">
                            <IconSearch class="mr-4px" />
                            搜索
                        </el-button>
                        <el-button @click="handleReset">
                            <IconReset class="mr-4px" />
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 数据展示区域 -->
            <div class="data-content">
                <!-- 数据插槽 -->
                <slot :data="tableData" :loading="loading"></slot>
            </div>

            <!-- 分页组件 -->
            <div v-if="showPagination && pagination.total > 10" class="pagination-wrapper">
                <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]" :total="pagination.total"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';

// 定义组件属性
interface Props {
    /** 获取数据的方法 */
    fetchMethod: (params: any) => Promise<any>;
    /** 是否显示分页 */
    showPagination?: boolean;
    /** 默认每页条数 */
    defaultPageSize?: number;
    /** 是否自动加载数据 */
    autoLoad?: boolean;
}

// 定义组件事件
interface Emits {
    (e: 'data-loaded', data: any[]): void;
    (e: 'search', params: any): void;
    (e: 'reset'): void;
}

const props = withDefaults(defineProps<Props>(), {
    showPagination: true,
    defaultPageSize: 10,
    autoLoad: true
});

const emit = defineEmits<Emits>();

// 响应式数据
const loading = ref(false);
const tableData = ref<any[]>([]);
const formRef = ref(null);

// 分页配置
const pagination = reactive({
    pageNum: 1,
    pageSize: props.defaultPageSize,
    total: 0
});

// 获取数据
const fetchData = async (resetPage = false) => {
    try {
        loading.value = true;

        // 构建请求参数
        const requestParams = {
            pageNum: resetPage ? 1 : pagination.pageNum,
            pageSize: pagination.pageSize
        };

        // 调用获取数据的方法
        const response = await props.fetchMethod(requestParams);

        // 处理响应数据
        if (response && response.data) {
            tableData.value = response.data || [];
            pagination.total = response.total || 0;

            emit('data-loaded', tableData.value);
        } else {
            tableData.value = [];
            pagination.total = 0;
            console.error('获取数据失败:', response?.message || '未知错误');
        }
    } catch (error) {
        console.error('获取数据异常:', error);
        tableData.value = [];
        pagination.total = 0;
    } finally {
        loading.value = false;
    }
};

// 搜索
const handleSearch = () => {
    pagination.pageNum = 1;
    fetchData(true);
    emit('search', {});
};

// 重置
const handleReset = () => {
    // 重置表单输入框
    if (formRef.value) {
        formRef.value.resetFields();
    }

    // 重置分页
    pagination.pageNum = 1;
    fetchData(true);
    emit('reset');
};

// 分页大小改变
const handleSizeChange = (size: number) => {
    pagination.pageSize = size;
    pagination.pageNum = 1;
    fetchData(true);
};

// 当前页改变
const handleCurrentChange = (page: number) => {
    pagination.pageNum = page;
    fetchData();
};

// 暴露方法给父组件
const refresh = () => {
    fetchData(false);
};

const reset = () => {
    handleReset();
};

// 组件挂载时自动加载数据
onMounted(() => {
    if (props.autoLoad) {
        fetchData(true);
    }
});

// 暴露方法
defineExpose({
    refresh,
    reset,
    fetchData,
    tableData,
    loading,
    pagination
});
</script>

<style lang="less" scoped>
.query-list {
    height: 100%;
    display: flex;
    flex-direction: column;

    .content-wrapper {
        flex: 1;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        border: 1px solid var(--border-light);
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .search-form {
            flex-shrink: 0;
            padding: 16px;
            border-bottom: 1px solid var(--border-light);
            background: var(--bg-primary);

            .search-form-content {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;
                align-items: flex-end;

                :deep(.el-form-item) {
                    margin-bottom: 0;
                    margin-right: 0;

                    .el-form-item__label {
                        font-weight: 500;
                        color: var(--text-primary);
                    }

                    .el-input,
                    .el-select {
                        width: 200px;
                    }

                    .el-date-editor {
                        width: 200px;
                    }
                }

                // 按钮组样式
                .el-form-item:last-child {
                    .el-button {
                        margin-right: 8px;

                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
            }
        }

        .data-content {
            padding: 16px;
            background: var(--bg-primary);
            display: flex;
            flex: 1;
            overflow: hidden;

            // 表格样式优化
            :deep(.el-table) {
                border-radius: 6px;
                height: 100%;

                .el-table__header {
                    background: var(--bg-primary);
                }
            }
        }

        .pagination-wrapper {
            padding: 6px 0;
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            border-top: 1px solid var(--border-light);
            background: var(--bg-primary);

            :deep(.btn-prev) {
                background: var(--input-bg) !important;
                border: 1px solid var(--input-border) !important;
                color: var(--text-primary) !important;
            }


            :deep(.btn-next) {
                background: var(--input-bg) !important;
                border: 1px solid var(--input-border) !important;
                color: var(--text-primary) !important;
            }

            :deep(.number) {
                background: var(--input-bg) !important;
                border: 1px solid var(--input-border) !important;
                color: var(--text-primary) !important;
            }

        }
    }
}

// 响应式设计
@media (max-width: 768px) {
    .query-list {
        .content-wrapper {
            .search-form {
                .search-form-content {
                    :deep(.el-form-item) {

                        .el-input,
                        .el-select,
                        .el-date-editor {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}
</style>